

<style type="text/css">


/*手机自适应*/
@media screen and (max-width: 767px){
	.nav_ul{
		display: none;
	}
	
	.loginbtn{
		display: none;
	}

	.regbtn{
		display: none;
	}
	
	.title_bars{
		float: right;
		color: #FFFFFF;
		font-size: 30px;
		margin-top: 20px;
		display: block;
	}
	
	.top{
		border:0px solid #FFFFFF;
		width:100%;
		height:60px;
	}
	
}


/*手机横屏自适应*/
@media screen and (max-width: 737px) and (min-width: 567px){
	.title_bars{
		float: right;
		color: #FFFFFF;
		font-size: 30px;
		margin-top: 3%;
		display: block;
	}

}

/*平板自适应*/
@media screen and (max-width: 991px) and (min-width: 768px){
	.title_bars{
		display: none;
	}

}

/*普通电脑屏幕自适应*/
@media screen and (min-width: 992px){
	.title_bars{
		display: none;
	}
	
	.top{
		border:0px solid #FFFFFF;
		width:100%;
		height:90px;
	}
}



.title{
	border: 0px solid #FFFFFF;
	margin:0 auto;
	width:82%;
	height:100%;
}

.logo{
	border:0px solid #FFFFFF;
	float:left;
	background-color: #FFFFFF;
	width:70px;
	height:70%;
}

.nav_ul{
	float:right;
	font-weight:bold;
	font-family: Raleway,Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,sans-serif;
	font-size: 15px;
	
}

.navigation{
	text-align:center;
	border:0px solid #FFFFFF;
	display: inline;
	float:left;
	color:hsla(0,0%,100%,.7);
	width:100px;
	height:90px;
	line-height:90px;
	margin-top:-10px;
	background-color:transparent;
	position: relative;
}

.navigation:hover{
	color:#FFFFFF;
}

.loginbtn{
	border:0px solid #FFFFFF;
	float:right;
	background-color:#a788d7;
	text-align:center;
	width:68px;
	height:50px;
	margin-top:20px;
	margin-left:5px;
	position: relative;
}

.login{
	font-weight:bold;
	font-family: Raleway,Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,sans-serif;
	font-size: 15px;
	color:#eee;
	
}

.loginbtn:hover{
	background-color:#9578C2;
	text-decoration:none;
}

.regbtn{
	background-color:#387DBE;
}

.regbtn:hover{
	background-color:#316DA6;
}

.dr{
	border:0px solid #FFFFFF;
	width:228px;
	height:285px;
}

</style>

<!-- 获取导航数据 -->
<#assign navigationTag = newTag("navigationTag")>
<#assign homePage = navigationTag("{'page_name':'navigation.html'}")>

<!-- 获取登录信息 -->
<#assign memberLoginTag = newTag("memberLoginTag")>
<#assign member = memberLoginTag()>

 
 <div class="top" data-am-sticky>
	<div class="title" data-am-scrollspy="{animation: 'fade'}">
		<!-- <img class="logo" src="img/logo.png"> -->
		<div class="am-icon-qq am-icon-sm am-icon-btn am-primary"></div>
		
		<!-- 手机 -->
		<span class="am-icon-bars title_bars" data-am-offcanvas="{target: '#doc-oc-demo2'}"></span>
		<!-- 侧边栏内容 -->
		<div id="doc-oc-demo2" class="am-offcanvas">
  			<div class="am-offcanvas-bar">
    			<div class="am-offcanvas-content">
      				<ul class="am-nav">
      					<#if homePage??>
      						<#list homePage.paramList as param>
						  		<li><a href="${ctx}/${param.url}">${param.title}</a></li>
						  	</#list>
					   </#if>
					   <li class="am-nav-divider"></li>
					   <#if member=="">
					   		<li><a href="${ctx}/member/login.html">登录</a></li>
					   		<li><a href="${ctx}/member/register.html">注册</a></li>
					   		<#else>
					   			<li><a href="${ctx}/member/member.html">个人中心</a></li>
					   			<li><a href="javascript:void(0)" style="color:green" onclick="logout()">安全退出</a></li>
					   </#if>
					   
					</ul>
			    </div>
			 </div>
		</div>
		
		<#if member=="">
				<a href="${ctx}/member/register.html">
					<button type="button" class="am-btn loginbtn regbtn" style="outline:none;">
						<div class="login">注册</div>
					</button>
				</a>
				<a href="${ctx}/member/login.html">
					<button type="button" class="am-btn loginbtn" style="outline:none;">
						<div class="login">登录</div>
					</button>
				</a>
		</#if>
		<ul class="nav_ul">
			<#if homePage??>
      			<#list homePage.paramList as param>
      				<li class="navigation">
						<a href="${ctx}/${param.url}">
							<div class="navigation fade">${param.title}</div>
						</a>
					</li>
      			</#list>
      			
      			<#if member=="">
      				<#else>
	      			<li class="navigation">
	      				<div class="dr">
	      				<span class="am-dropdown" id="drop" style="float:left;">
	      				<@image border="0" class="am-circle" src="${member.picture}" width="50" height="50"/>
	      				<ul class="am-dropdown-content drop">
						    <li class="am-dropdown-header" style="font-size: 10px;">${member.student_number}&nbsp;&nbsp;${member.nick_name}</li>
						    <li><a href="${ctx}/member/member.html">个人中心</a></li>
						    <li><a href="javascript:void(0)" style="color:green" onclick="logout()">安全退出</a></li>
						  </ul>
						  </span>
						</div>
	      			</li>
      			</#if>
      			
      		</#if>
		</ul>
		
	</div>
	
	</div>
	<!-- 设置滚动监听-->
	<div class="temp" data-am-scrollspy></div>
	
	<!-- 弹出框 -->
	<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">退出</div>
    <div class="am-modal-bd">
      	你确定要退出吗？
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>

<!-- 弹出框 -->
	<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm2">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">退出</div>
    <div class="am-modal-bd">
      	退出失败！请重试！
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>
	
<script type="text/javascript">


$("#drop").mouseenter(function(){
	
	$("#drop").dropdown('open');
});



$(".dr").mouseleave(function(){
	
	$("#drop").dropdown('close');
});







$(".fade").mouseover(function(){
	$(this).fadeOut(200);
	$(this).fadeIn(200);
});

$(function() {
  $('.temp').on('inview.scrollspy.amui', function() {
	  $('.top').css({"background-color":"transparent","height":"90px","box-shadow":"0px 0px 0px #D8D8D8"});
	  $('.navigation').css({"color":"hsla(0,0%,100%,.7)","height":"90px","line-height":"90px"});
	  $('.loginbtn').css({"margin-top":"20px"});
	  $('.fade').animate({'top':'0px'},200);
	  $('.loginbtn').animate({'top':'0px','height':'50px'},200); 
	  $('.title_bars').css({"color":"#FFFFFF"});
  }).on('outview.scrollspy.amui', function() {
	$('.top').animate({backgroundColor:'#FFFFFF',height:'60px'},200);
  	$('.top').css({"box-shadow":"3px 3px 3px #D8D8D8"});
  	$('.fade').animate({'top':'-15px'},200);
  	$('.loginbtn').animate({'top':'-13px','height':'40px'},200);
  	$('.navigation').css({"color":"rgb(129, 138, 145)"});
  	$('.title_bars').css({"color":"#000000"});
  });
	  
});


function logout(){
	
	$('#my-confirm').modal({
        relatedTarget: this,
        onConfirm: function(options) {
        	$.ajax({
        		url:"${ctx}/api/member/logout.do",
        		type:"POST",
        		dataType:"json",
        		success:function(result){
        			if(result.result==1){
        				window.location.href="${ctx}/index.html";
        			}else{
        				
        				$("body").overhang({
        					type: "error",
        					message: "退出失败！请重试！"
        				});
        				
        			}
        		},
        		error:function(){
        			$("body").overhang({
    					type: "error",
    					message: "请求错误！请重试！"
    				});
        		}
        	});
        }
      });
	
	
	
}

$youziku.load(".subtitle3", "f9803ae6218d4cb885404729e110fcf9", "minijianxiyuan");
$youziku.draw();

</script>